<template>
  <div>
    <div class="btnList">
      <el-button type="primary" @click="getHTMLS('Cytoscape')">cytoscape</el-button>
      <el-button type="primary" @click="getHTMLS('VueCytoscape')">vue-cytoscape</el-button>
      <el-button type="primary" @click="getComponent('LogSelectionMod')">日志视图模式选择案例</el-button>
    </div>
    <keep-alive>
      <transition enter-active-class="animated zoomInDown" leave-active-class="animated zoomOutDown" mode="out-in">
        <component :is="component" v-if="showFlag" style="width:100%;height:100%;"></component>
        <!-- <div id="" v-if="showFlag == false" v-html="htmls"></div> -->
        <iframe :src="this.htmls" width="100%" height="100%" v-if="showFlag == false"></iframe>
      </transition>
    </keep-alive>
  </div>
</template>

<script>
// import cytoscape from '../../../static/cytoscape/index.html';
import LogSelectionMod from "../../components/htmlDemo/LogSelectionMod.vue";
export default {
  name: "demoList",
  components: { LogSelectionMod },

  data() {
    return {
      component: "",
      showFlag: true,
      htmls: "",
    };
  },

  methods: {
    getHTMLS(str) {
      this.showFlag = false;
      if ("Cytoscape" == str) {
        this.htmls = "../../../static/cytoscape/index.html";
      } else if ("VueCytoscape") {
        this.htmls = "../../../static/vueCytoscape/index.html";
      }
    },
    getComponent(str) {
      this.showFlag = true;
      this.component = str;
    },
  },

  mounted() {
    //默认加载模糊查询
    this.component = "";
  },
};
</script>

<style scoped>
.btnList {
  width: 100%;
}
</style>
